<template>
  <div class="wrapper">
    <div>
      <el-form
        v-has="'checkTestData'"
        class="demo-form-inline"
        label-position="left"
        label-width="70px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="数据类型" label-width="100px">
              <el-select
                style="width: 100%"
                v-model="isTest"
                placeholder="请选择数据类型"
                clearable
                @change="handleChangeIsTest"
              >
                <el-option
                  v-for="item in isTestOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="header">
      <div class="title-box">
        <div class="title">各项完成数</div>
        <el-date-picker
          :inline="true"
          style="width: 320px; margin-left: 20px"
          v-model="finishTime"
          :clearable="true"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="staticDataFn"
        >
        </el-date-picker>
      </div>
      <div class="data">
        <div class="data-item">
          <span class="data-item-label">职途卡发放总数</span>
          <span class="data-item-count">{{
            cardTotal !== null || cardTotal !== "null" ? cardTotal : "-"
          }}</span>
        </div>
        <div class="data-item">
          <span class="data-item-label">职途卡总激活数</span>
          <span class="data-item-count">{{
            activeTotal !== null || activeTotal !== "null" ? activeTotal : "-"
          }}</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div
        ref="cardRef"
        :class="['each-finished']"
        :style="{ height: cardHeight }"
      >
        <div
          class="each-finished-item"
          v-for="(item, index) in rightList"
          :key="index"
        >
          <div class="left">
            <div :class="['name-box', `name-bgc-${index % 6}`]">
              <img class="img" :src="getItemImg(item)" alt="" />
              <span class="name">{{ item.rightName }}</span>
            </div>
            <div class="count-box">
              <div class="click-num">
                <div class="click-title">
                  {{ item.rightId === "-2" ? "使用人数" : "点击人数" }}
                </div>
                <div class="num">{{ getClickCount(item) }}</div>
              </div>
              <div
                class="click-num"
                v-if="
                  item.rightId !== '-2' &&
                  item.rightName != '咨询辅导' &&
                  item.rightName != '竞争力分析' &&
                  item.rightName != '顾问服务'
                "
              >
                <div
                  class="click-title"
                  v-if="
                    item.rightName != '咨询辅导' &&
                    item.rightName != '竞争力分析'
                  "
                >
                  {{ item.finishPercent == "-1" ? "点击人数" : "完成人数" }}
                </div>
                <div class="num">{{ getFinishCount(item) }}</div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="rate-title" v-if="item.rightId !== '-2'">
              占总人数的完成占比率
            </div>
            <div class="num" v-if="item.rightId !== '-2'">
              {{ keepTwoDecimal(item) }}
            </div>
            <img
              :src="item.valid == '1' ? chartImg : noDataChart"
              :class="item.valid == '1' ? 'chart-img' : 'no-chart-img'"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="glass-card" v-show="cardHeight === '315px'"></div>
      <div class="unfold" v-if="showUnfold">
        <elan-svg
          :icon="arrowDirection"
          class="unfold-btn"
          @click="handleFold"
        ></elan-svg>
      </div>
      <div class="task-visit-trend">
        <div class="left">
          <div class="title pb21">任务访问趋势</div>
          <div class="left-content">
            <el-form
              :model="form"
              class="demo-form-inline"
              label-position="left"
              label-width="70px"
            >
              <el-row :gutter="20">
                <el-col :span="7">
                  <el-form-item label="客户单位" label-width="85px">
                    <el-select
                      style="width: 100%"
                      v-model="form.appId"
                      placeholder="请选择客户单位"
                      clearable
                      @change="trendFn"
                    >
                      <el-option
                        v-for="item in applyList"
                        :key="item.appId"
                        :label="item.appName"
                        :value="item.appId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="统计时间">
                    <el-date-picker
                      style="width: 100%"
                      v-model="form.time"
                      :picker-options="pickerOptions"
                      :clearable="false"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="trendFn"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="任务筛选">
                    <el-select
                      style="width: 100%"
                      v-model="form.rightValue"
                      placeholder="请选择任务名称"
                      value-key="rightId"
                      clearable
                      @change="handleChangeRight"
                    >
                      <el-option
                        v-for="item in taskList"
                        :key="item.rightId"
                        :label="item.rightName"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="指标筛选">
                    <span
                      :class="[
                        'tag',
                        currentTag === item.value ? 'active' : '',
                      ]"
                      v-for="(item, index) in tags"
                      :key="index"
                      @click="handleClickTag(item.value)"
                    >
                      {{ item.name }}
                    </span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="chart-box">
              <LineChart
                v-if="xData"
                :xData="xData"
                :yData="yData"
                :height="chartHeight < 400 ? 400 : chartHeight"
                :currentTag="currentTag"
              ></LineChart>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title-box">
            <div class="title">排行榜</div>
            <el-select
              v-if="cardTypeOptions.length >= 1"
              style="width: 200px"
              v-model="cardType"
              placeholder="请选择职途版本"
              size="mini"
              @change="handleVersionChange"
            >
              <el-option
                v-for="item in cardTypeOptions"
                :key="item.cardType"
                :label="item.cardName"
                :value="item.cardType"
              ></el-option>
            </el-select>
          </div>
          <div
            class="right-content-box"
            :style="{
              height: chartHeight < 400 ? '593px' : chartHeight + 193 + 'px',
            }"
          >
            <div class="right-content">
              <div class="notice-box">
                <img :src="notice" class="notice" />
                <div class="notice-line">
                  <el-carousel
                    height="13px"
                    direction="vertical"
                    :autoplay="true"
                    indicator-position="none"
                    arrow="never"
                  >
                    <el-carousel-item
                      v-for="(item, index) in latedFinishedList"
                      :key="index"
                    >
                      <div class="notice-text">
                        {{ item.personName }}完成了{{ item.rightName }}
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <div
                :class="[`num${index + 1}`, 'num']"
                v-for="(item, index) in fontRankList"
                :key="index"
              >
                <div class="name">{{ item.personName }}</div>
                <img
                  :src="item.personPhoto ? item.personPhoto : defaultAvatar"
                  class="avatar"
                  alt=""
                />
              </div>
              <el-scrollbar class="rank-list">
                <div
                  class="rank-list-item"
                  v-for="(item, index) in rankList"
                  :key="index"
                >
                  <span class="sort">{{ index + 4 }}</span>
                  <img
                    class="pic"
                    :src="item.personPhoto ? item.personPhoto : defaultAvatar"
                    alt=""
                  />
                  <span class="username">{{ item.personName }}</span>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chartImg from "@/assets/images/chartImg.png";
import noDataChart from "@/assets/images/noDataChart.png";
import arrowRight from "@/assets/images/arrowRight.png";
import arrowLeft from "@/assets/images/arrowLeft.png";
import brain from "@/assets/images/brain.png";
import path from "@/assets/images/path.png";
import idea from "@/assets/images/idea.png";
import chat from "@/assets/images/chat.png";
import report from "@/assets/images/report.png";
import head from "@/assets/images/head.png";
import camera from "@/assets/images/camera.png";
import subscribe from "@/assets/images/subscribe.png";
import careerFill from "@/assets/images/careerFill.png";
import balance from "@/assets/images/balance.png";
import search from "@/assets/images/search.png";
import notice from "@/assets/images/notice@3x.png";
import defaultAvatar from "@/assets/images/defaultAvatar.png";

import {
  staticData,
  trend,
  cardTypeList,
  rank,
  selectList,
  applyList,
  latedFinishedRecord,
} from "@/api";
export default {
  components: {
    LineChart: () => import("./components/LineChart.vue"),
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const date1 = new Date("2023-09-01");
          const date2 = new Date(
            new Date().getFullYear() +
              "-" +
              ("0" + (new Date().getMonth() + 1)).substr(-2) +
              "-" +
              ("0" + new Date().getDate()).substr(-2)
          );
          const diff = date2 - date1 + 60 * 60 * 24 * 1000;
          return (
            time.getTime() < Date.now() - diff || Date.now() < time.getTime()
          );
        },
      };
    },
  },
  data() {
    return {
      finishTime: [],
      arrowDirection: "arrow-down",
      chartImg: chartImg,
      noDataChart: noDataChart,
      arrowRight: arrowRight,
      arrowLeft: arrowLeft,
      notice: notice,
      defaultAvatar: defaultAvatar,
      path: path,
      head: head,
      chartHeight: window.innerHeight - 750,
      form: {
        time: "",
        cardType: "",
        rightValue: {},
        appId: "",
      },
      isTest: 0,
      cardType: "",
      showUnfold: false,
      cardHeight: "auto",
      tags: [
        { name: "访问人数", value: "visitPersonNumber" },
        { name: "打开次数", value: "openPageNumber" },
      ],
      currentTag: "visitPersonNumber",
      cardTotal: "",
      activeTotal: "",
      cardTypeOptions: [],
      clickCountArr: [],
      clickPersonCountArr: [],
      rightList: [],
      taskList: [],
      latedFinishedList: [],
      rankList: [],
      applyList: [],
      fontRankList: [],
      yData: [],
      xData: [],
      isTestOptions: [
        { label: "正式数据", value: 0 },
        { label: "测试数据", value: 1 },
        { label: "全部", value: 2 },
      ],
    };
  },
  async created() {
    window.addEventListener("resize", this.getHeight);
    this.getFinishDefaultTime();
    this.staticDataFn();
    this.selectListFn();
    this.applyListFn();
    await this.getData();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  mounted() {},
  methods: {
    getClickCount(item) {
      if (item.valid == "0") return "-";
      if (item.clickCount < 0) return "-";
      return item.clickCount;
    },
    getFinishCount(item) {
      if (item.valid == "0") return "-";
      if (item.finishCount < 0) return "-";
      return item.finishCount;
    },
    getHeight() {
      this.chartHeight = window.innerHeight - 750;
    },
    handleChangeIsTest() {
      this.staticDataFn();
      this.trendFn();
    },
    keepTwoDecimal(item) {
      if (item.valid == 0) return "-";
      if (item.finishPercent < 0) return "-";
      const num = item.finishPercent * 100;
      var result = parseFloat(num);
      if (isNaN(result)) {
        return "-";
      }
      result = Math.round(num * 100) / 100;
      return result + "%";
    },
    applyListFn() {
      applyList().then((res) => {
        if (res.code == 200) {
          this.applyList = res.data;
        }
      });
    },
    async getData() {
      await this.cardTypeListFn();
      await this.getDefaultTime();
      this.trendFn();
      this.rankFn();
      this.latedFinishedRecordFn();
    },
    async getDefaultTime() {
      const startTime = this.getNthDay();
      const endTime = this.getCurrentDay();
      this.form.time = [startTime, endTime];
    },
    async getFinishDefaultTime() {
      const startTime = this.getNthDay();
      const endTime = this.getCurrentDay();
      this.finishTime = [startTime, endTime];
    },
    //设置默认日期
    getNthDay() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      return startData;
    },
    getCurrentDay() {
      // 获取当天日期
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      return date.getFullYear() + "-" + month + "-" + day;
    },
    handleChangeRight(value) {
      this.form.rightId = value.rightId;
      this.form.version = value.version;
      this.trendFn(true);
    },
    getCardHeight() {
      const cardRef = this.$refs.cardRef;
      if (cardRef && cardRef.offsetHeight > 189) {
        this.showUnfold = true;
        this.cardHeight = "315px";
      }
    },
    getItemImg(item) {
      const { rightId } = item;
      switch (rightId) {
        case "1": // 性格测评v1.0
          return idea;
        case "14": // 性格测评v2.0
          return idea;
        case "2": // 职业测评v1.0
          return path;
        case "10": // 职业测评v2.0
          return path;
        case "3": // 完善简历
          return brain;
        case "11": // 简历诊断
          return search;
        case "5": // 竞争力分析
          return balance;
        case "6": // 顾问咨询/咨询辅导
          return chat;
        case "7": // 职途报告
        case "21": // 职途报告
          return report;
        case "12": // 职业报告
          return brain;
        case "16": // AI面试
          return camera;
        case "-1": // 订阅推送
          return subscribe;
        case "-2": // 职业大全
          return careerFill;
        default:
          break;
      }
    },
    handleVersionChange() {
      this.rankFn();
      this.latedFinishedRecordFn();
    },
    rankFn() {
      const params = {
        cardType: this.cardType,
        pageNo: 1,
        pageSize: 10,
      };
      rank(params).then((res) => {
        if (res.code == 200) {
          this.fontRankList = res.data.slice(0, 3);
          this.rankList = res.data.slice(3);
        }
      });
    },
    async cardTypeListFn() {
      const res = await cardTypeList();
      if (res.code == 200) {
        this.cardTypeOptions = res.data;
        if (this.cardTypeOptions.length > 0) {
          this.cardType = this.cardTypeOptions[0].cardType;
        }
      }
    },
    latedFinishedRecordFn() {
      this.latedFinishedList = [];
      const params = {
        cardType: this.cardType,
        pageNo: 1,
        pageSize: 10,
      };
      latedFinishedRecord(params).then((res) => {
        if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
          this.latedFinishedList = res.data;
        }
      });
    },
    selectListFn() {
      selectList().then((res) => {
        if (res.code == 200) {
          this.taskList = res.data;
          this.taskList.push({
            rightId: "-1",
            rightName: "订阅推送",
            version: "1",
          });
          this.taskList.push({
            rightId: "-2",
            rightName: "职业大全",
            version: "1",
          });
        }
      });
    },
    trendFn(flag) {
      const params = {
        beginTime:
          Array.isArray(this.form.time) && this.form.time.length
            ? this.form.time[0] + " 00:00:00"
            : "",
        entTime:
          Array.isArray(this.form.time) && this.form.time.length
            ? this.form.time[1] + " 23:59:59"
            : "",
        // cardType: this.form.cardType,
        appId: this.form.appId,
        isTest: this.isTest,
      };
      if (flag) {
        params.rightId = this.form.rightId;
        params.version = this.form.version;
      }
      if (this.cardTypeOptions.length < 2) {
        params.cardType = this.cardTypeOptions[0].cardType;
      }
      trend(params).then((res) => {
        if (res.code == 200) {
          const clickCountArr = [];
          const clickPersonCountArr = [];
          const xData = [];
          this.clickCountArr = res.data.forEach((item) => {
            clickCountArr.push(item.clickCount);
            clickPersonCountArr.push(item.clickPersonCount);
            xData.push(item.timeString);
          });
          this.xData = xData;
          this.clickCountArr = clickCountArr;
          this.clickPersonCountArr = clickPersonCountArr;
          if (this.currentTag == "visitPersonNumber") {
            this.yData = clickPersonCountArr;
          } else {
            this.yData = clickCountArr;
          }
        }
      });
    },
    staticDataFn() {
      const params = {
        isTest: this.isTest,
        beginTime:
          Array.isArray(this.finishTime) && this.finishTime.length
            ? this.finishTime[0] + " 00:00:00"
            : "",
        entTime:
          Array.isArray(this.finishTime) && this.finishTime.length
            ? this.finishTime[1] + " 23:59:59"
            : "",
      };
      staticData(params).then((res) => {
        if (res.code == 200) {
          this.rightList = res.data.list;
          this.activeTotal = res.data.activeTotal;
          this.cardTotal = res.data.cardTotal;
          this.$nextTick(() => {
            this.getCardHeight();
          });
        }
      });
    },
    handleClickTag(value) {
      this.currentTag = value;
      if (this.currentTag == "visitPersonNumber") {
        this.yData = this.clickPersonCountArr;
      } else {
        this.yData = this.clickCountArr;
      }
    },
    handleFold() {
      if (this.cardHeight === "auto") {
        this.cardHeight = "315px";
        this.arrowDirection = "arrow-down";
      } else {
        this.cardHeight = "auto";
        this.arrowDirection = "arrow-up";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-800-ExtraBold"; /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf");
}
.wrapper {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0 24px 24px 24px;
  .title {
    font-size: 22px;
    font-weight: 600;
    color: #222222;
    padding-left: 8px;
  }
  .header {
    padding: 12px 27px 17px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-box {
      display: flex;
      align-items: center;
    }
    .data {
      display: flex;
      align-items: center;
      &-item {
        display: flex;
        align-items: center;
        &:not(:last-child) {
          margin-right: 32px;
        }
        &-label {
          font-size: 18px;
          font-weight: 400;
          color: #333333;
        }
        &-count {
          font-size: 30px;
          font-family: D-DIN-PRO-800-ExtraBold;
          font-weight: 600;
          color: #2a3455;
          margin-left: 12px;
        }
      }
    }
  }
  .content {
    position: relative;
    .each-finished {
      display: grid;
      grid-gap: 16px;
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      overflow: hidden;
      &-item {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        padding: 20px;
        border-radius: 8px;
        background-color: #f4f6f9;
        .left {
          .name-box {
            display: flex;
            align-items: center;
            padding: 10px 20px 10px 18px;
            border-radius: 22px;
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            .img {
              width: 22px;
              height: 22px;
              margin-right: 6px;
            }
            span {
              height: 22px;
              line-height: 22px;
            }
          }
          .name-bgc-0 {
            background: #b26aef;
          }
          .name-bgc-1 {
            background-color: #4680ff;
          }
          .name-bgc-2 {
            background-color: #00a3d0;
          }
          .name-bgc-3 {
            background: #7052ff;
          }
          .name-bgc-4 {
            background-color: #2799e4;
          }
          .name-bgc-5 {
            background-color: #22af89;
          }
          .name-bgc-6 {
            background-color: #7052ff;
          }
          .name-bgc-6 {
            background-color: #7052ff;
          }
          .count-box {
            margin-top: 22px;
            display: flex;
            justify-content: space-between;
            .click-num {
              .click-title {
                font-size: 15px;
                color: #8896ac;
                margin-bottom: 8px;
              }
              .num {
                font-size: 24px;
                font-family: D-DIN-PRO-800-ExtraBold;
                font-weight: 600;
                text-align: center;
                color: #2a3455;
              }
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .rate-title {
            font-size: 15px;
            color: #8896ac;
            font-family: PingFangSC, PingFang SC;
            margin-bottom: 8px;
            font-weight: 400;
          }
          .num {
            margin-left: auto;
            font-size: 20px;
            font-family: D-DIN-PRO, D-DIN-PRO;
            font-weight: 600;
            color: #445cfe;
            margin-bottom: 12px;
          }
          .chart-img {
            margin-left: auto;
            width: 138px;
            height: 62px;
          }
        }
      }
    }
    .glass-card {
      position: relative;
      background: linear-gradient(
        180deg,
        rgba(240, 242, 245, 0) 0%,
        #f0f2f5 100%
      );
      width: 100%;
      height: 55px;
      margin-top: -55px;
    }
    .unfold {
      z-index: 2;
      width: 100%;
      display: flex;
      justify-content: center;
      // height: 40px;
      margin-top: -15px;
      font-size: 52px;
      width: 100%;
      /deep/ .el-icon-arrow-up {
        font-weight: bolder;
      }
      /deep/ .el-icon-arrow-down {
        font-weight: bolder;
      }
      .unfold-btn {
        cursor: pointer;
      }
    }
    .task-visit-trend {
      display: flex;
      margin-top: 40px;
      .pb21 {
        padding-bottom: 21px;
      }
      .left {
        flex: 1;
        margin-right: 24px;
        &-content {
          padding: 24px;
          border-radius: 8px;
          background: #ffffff;
          .tag {
            padding: 8px 16px;
            border-radius: 18px;
            font-size: 14px;
            color: #555;
            border: 1px solid #d2d5e1;
            cursor: pointer;
            &.active {
              background: #e5e4ea;
              color: #222222;
              border: 1px solid #e5e4ea;
            }
            &:not(:last-child) {
              margin-right: 14px;
            }
          }
        }
        .chart-box {
          margin-top: 20px;
        }
      }
      .right {
        width: 326px;
        .title-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
        }
        .right-content-box {
          border-radius: 8px;
          background: #cbf1f2;
        }
        &-content {
          border-radius: 8px;
          height: 593px;
          background: url("../../assets/images/rankBg.png") no-repeat;
          background-position: center;
          background-size: 100% 100%;
          padding: 32px 21px 0 21px;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .notice-box {
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.3);
            border: 1px solid #fff;
            padding: 15px 0 14px 9px;
            display: flex;
            align-items: center;
            .notice {
              width: 20px;
              height: 20px;
              margin-right: 7px;
              background-color: transparent;
            }
            .notice-line {
              width: 100%;
              height: 13px;
              overflow: hidden;
              .notice-text {
                font-size: 13px;
                color: #429ec3;
              }
            }
          }
          .num {
            position: absolute;
            text-align: center;
            width: 110px;
            .name {
              font-size: 15px;
              font-weight: 600;
              color: #0084b1;
              margin-bottom: 8px;
            }
            .avatar {
              width: 40px;
              height: 40px;
              border: 2px solid #ffffff;
              border-radius: 50%;
            }
          }
          .num2 {
            left: 27px;
            top: 146px;
          }
          .num1 {
            left: 122px;
            top: 116px;
          }
          .num3 {
            right: 5px;
            top: 196px;
          }

          .rank-list {
            padding: 22px 0 0 24px;
            height: 269px;
            border-radius: 10px 10px 0 0;
            border: 1px solid #fff;
            border-bottom: none;
            overflow: hidden;
            height: 270px;
            background-color: rgba(255, 255, 255, 0.3);
            &-item {
              display: flex;
              align-items: center;
              color: #2082b3;
              font-size: 14px;
              &:not(:last-child) {
                margin-bottom: 20px;
              }
              .sort {
              }
              .pic {
                margin: 0 12px 0 21px;
                border-radius: 50%;
                width: 30px;
                height: 30px;
              }
              .username {
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .el-date-editor {
  background-color: #fafbfe;
  font-family: PingFangSC, PingFang SC;
  color: #555555;
}
/deep/ .el-input__inner {
  background-color: #fafbfe;
}
/deep/ .el-row {
  display: flex;
}
/deep/ .el-range-editor .el-range-input {
  background-color: #fafbfe;
}
</style>
